<template>
	<view class="page">
		<view class="page-menu">
			<view class="info_data">
				<u-row gutter="16" >
					<u-col span="2">
						<view class="demo-layout" style="margin-left: 20rpx;">
							<u-checkbox-group @change="CheckedAll">
							  <u-checkbox v-model="checkedAll" shape="square" active-color="#FFC694"></u-checkbox>
							</u-checkbox-group>
						</view>
					</u-col>
					<u-col span="2">
						<view class="demo-layout">序号</view>
					</u-col>
					<u-col span="6">
						<view class="demo-layout">标题</view>
					</u-col>
					<u-col span="2">
						<view class="operation" style="margin-left: -10rpx;">操作</view>
					</u-col>
				</u-row>
				<scroll-view class="wrap_right_bottom_scroll" :scroll-top="scrollTop" scroll-y="true" @scroll="scroll" scroll-with-animation="true">
					<view class="row_u" v-for="(item,index) in program" :key="index" :class="{changeStylebg:item.checked == true}">
						<u-row calss="row-u" gutter="16">
							<u-col span="2">
								<view class="demo-layout" style="margin-left: 20rpx;">
									<u-checkbox-group @change="Checked(index)">
										<u-checkbox v-model="program[index].checked" shape="square" active-color="#FFC694"></u-checkbox>
									</u-checkbox-group>
								</view>
							</u-col>
							<u-col span="2" >
								<view class="demo-layout">{{index+1}}</view>
							</u-col>
							<u-col span="6">
								<view class="demo-layoutTwo" @click="gotoredact(item.content_id)">
									<view class="cen_title">
										{{item.content_name}}
									</view>
								</view>
							</u-col>
							<u-col span="2">
								<view class="demo-layout" style="margin-left: -10rpx;">
									<view class="ss" @click="up(index)">
										<image class="imgUp" src="../../static/img/up.png" mode=""></image>
									</view>
									<view class="" @click="descend(index)">
										<image class="imgDescend" src="../../static/img/descend.png" mode=""></image>
									</view>
								</view>
							</u-col>
						</u-row>
					</view>
				</scroll-view>
			</view>
      <view class="btn-content">
        <view class="add" @click="addContent" v-if="modelType != 'general_content' && modelType != 'wechat_material'">
          新增内容
        </view>
        <view class="del" @click="open">
          删除选中内容
        </view>
      </view>

		</view>

		<view class="bottom" @click="generate">
		  <view class="bottom_but" >
			<span class="bottom_but_text">节目单生成</span>
		  </view>
		</view>
		<u-popup width="670rpx"  v-model="show" mode="center">
			<view class="popup" catchtouchmove="true">
				<view class="popup_del">
					确定要删除选中内容吗？
				</view>
				<view class="popup_bottom">
					<view class="popup_bottom_left" @click="cancel">
						取消
					</view>
					<view class="popup_bottom_right" @click="ensure">
						确定
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default{
	name:'preview',
	data(){
		return{
			show:false,
			changeSelectStybg:'',
			program:[],
			checkedAll:'',
			scrollTop: 0,
			old: {
				scrollTop: 0
			},
      delIds:[],
      modelType:'general_content'
		}
	},
  onLoad: function (option) {
    console.log("model_type",option.model_type); //打印出上个页面传递的参数。
    this.modelType = option.model_type
  },
	mounted() {
		this.getProgrammeContentList()
	},
	methods:{
    async getProgrammeContentList(){
      let params={
        "login_token":uni.getStorageSync('loginToken'),
        "model_type":this.modelType
      }
      let res=await this.$api.showProgrammeContentList(params)
      if(res.data.level == "success"){
        let resDatas = res.data.data;

        if(resDatas.length > 0) {
          let _this = this
          resDatas.forEach(function (item, index) {
            item.checked = false
            _this.program.push(item)
          })
        }
      }else{
        uni.showToast({
          title:res.data.message,
          icon:'none'
        })
      }
    },
		scroll(e) {
			this.old.scrollTop = e.detail.scrollTop
		},
		// 全选
		CheckedAll() {
			if(this.checkedAll == true){
        this.delIds=[];
				this.program.map(val => {
					val.checked = true;
          this.delIds.push(val.id)
				})
			}else{
				this.program.map(val => {
					val.checked = false;
          this.delIds=[];
				})
			}
		},
		//生成
		generate(){
      uni.redirectTo({
        url:'/pages/programme/set'
      })
		},
		//上移
		up(index){
			this.setSort(this.program[index].id,"up")
		},
		//下移
		descend(index){
      this.setSort(this.program[index].id,"down")
		},
    //设置排序
    async setSort(id,sort_type){
      let params={
        "login_token":uni.getStorageSync('loginToken'),
        "programme_content_id":id,
        "sort_type":sort_type,
        "model_type":this.modelType
      }
      let res=await this.$api.setProgrammeContentSort(params)
      if(res.data.level == "success"){
        this.program=[]
         this.getProgrammeContentList()
      }else{
        uni.showToast({
          title:res.data.message,
          icon:'none'
        })
      }
    },
		cancel(){
			this.show = false
		},
		async ensure(){
      let params={
        "login_token":uni.getStorageSync('loginToken'),
        "ids":this.delIds,
      }
      let res=await this.$api.delProgrammeContent(params)
      if(res.data.level == "success"){
        this.show = false
        this.program=[]
        this.getProgrammeContentList()
      }else{
        uni.showToast({
          title:res.data.message,
          icon:'none'
        })
      }

		},
    addContent(){
      if(this.modelType == 'community'){
        uni.redirectTo({
          url: '/pages/community/addContent'
        })

        return;
      }

      if(this.modelType == 'sz_content'){
        uni.redirectTo({
          url: '/pages/localView/newContent'
        })

        return;
      }

    },
		open() {
      if(this.delIds.length <= 0){
        uni.showToast({
          title:'请先选择需要删除的内容',
          icon:'none'
        })

        return;
      }
			this.show = true
		},
		Checked(index){
				this.changeSelectStybg = index

			  let thatId = this.program[index].id
			  if(this.program[index].checked){
				this.delIds.push(thatId);
			  }else {
				var index2 = this.delIds.indexOf(thatId);
				if (index2 > -1) {
				  this.delIds.splice(index2, 1);
				}
			  }
		},
		
		//跳到新增页面
		gotoredact(content_id){
			if(this.modelType=='community'){
				uni.navigateTo({
					url:'/pages/community/addContent?content_id='+content_id
				})
			}
			if(this.modelType=='sz_content'){
				uni.navigateTo({
					url:'/pages/localView/newContent?content_id='+content_id
				})
			}
			
		}
	}
}
</script>

<style scoped lang="scss">
	.page{
		background-color: #fdc986;
		min-height: 100vh;
		overflow: hidden;
	}

  .page-menu{
    padding: 40rpx;

    .page_title{
      font-size: 35rpx;
      font-weight: 550;
      color: #800A0B;
    }
    .info_data{
      margin-top: 30rpx;
      width: 100%;
      max-height: 760rpx;
      // line-height: 100rpx;
      background-color: #81120D;
      // padding-bottom: 10rpx;
    }
    .info_table{
      background-color: #81120D;
    }
    .demo-layout{
      color: #FFC695;
	  height: 120rpx;
	  font-size: 30rpx;
	  display: flex;
	  justify-content: flex-start;
	  align-items: center;
	  // margin-top: 50rpx;
	  // margin-bottom: 40rpx;
    }

	.cen_title{
		overflow: hidden;
		word-break: break-all;
		text-overflow: ellipsis;
		//display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		white-space: nowrap;
    width: 90%;
	}
	.demo-layoutTwo{
		color: #FFC695;
		height: 120rpx;
		font-size: 30rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
    .checkbox{
      margin-top: 35rpx;
      margin-left: 10rpx;
    }
    .row_u{
      border-top: #FFC694 solid 1px;
    }
    .wrap_right_bottom_scroll{
      width: 100%;
      max-height: 650rpx;
    }
  }

  .page-device{
    padding-left: 40rpx;
    padding-right: 40rpx;
    padding-top: 20rpx;

    .page_title{
      font-size: 35rpx;
      font-weight: 550;
      color: #800A0B;
    }
    // .info_data{
    //   margin-top: 30rpx;
    //   width: 100%;
    //   height: 300rpx;
    //   line-height: 100rpx;
    //   background-color: #81120D;
    //   padding-bottom: 10rpx;
    // }
    .info_table{
      background-color: #81120D;
    }
    // .demo-layout{
    //   color: #FFC695;
    // }
    .checkbox{
      margin-top: 35rpx;
      margin-left: 10rpx;
    }
  }

  .bottom{
    background-color: #FFC18A;
    border-top: #93110A solid 1rpx;
    position: fixed;
    bottom: 0;
    // left: 0;
    height: 130rpx;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .bottom_but{
    background-image: url(../../static/img/login_imgTwo.png);
    background-repeat: no-repeat;
    height: 100rpx;
    background-size: 100% 100%;
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFC695;
  }
  .compileView{
	  // height: 50rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
  }
  .operation{
	  // color: #FFC695;
	  // text-align: center;
	  // margin-top: 35rpx;
	  
	  color: #FFC695;
	  height: 120rpx;
	  font-size: 29rpx;
	  display: flex;
	  justify-content: flex-start;
	  align-items: center;
  }
  .imgUp{
	  // margin-top: 35rpx;
	  width: 30rpx;
	  height: 40rpx;
	  display: flex;
	  justify-content: flex-start;
	  align-items: center;
  }
  .imgDescend{
	  // margin-left: 25rpx;
	  // margin-top: 35rpx;
	  // width: 20rpx;
	  // height: 30rpx;
	  margin-left: 30rpx;
	  width: 30rpx;
	  height: 40rpx;
	  display: flex;
	  justify-content: flex-start;
	  align-items: center;
  }
  .btn-content{
    //display: flex;
    //flex-direction: row;
    //margin-top: 20rpx;

    .add{
      margin-top: 20rpx;
      height: 100rpx;
      border-radius: 5rpx;
      background-color: #FFC28D;
      border: 1rpx solid #93110A;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 550;
      color: #93110A;
      font-size: 30rpx;
    }
    .del{
      text-align: center;
      margin-top: 50rpx;
      color: #93110A;
    }
  }
  .popup{
  	background-color: #FFC18A;
  	// height: 550rpx;
  	width: 100%;
  	text-align: center;
  }
  .popup_bottom{
  	display: flex;
  	justify-content: center;
  	// margin-top: 20rpx;
  	height: 100rpx;
  	border-top: #93110A solid 1px;
  }
  .popup_bottom_left{
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50%;
  	
  }
  .popup_bottom_right{
  	background-color: #93110A;
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50%;
  	color: #FFC18A;
  }
  .popup_del{
  	  font-weight: 500;
  	  height: 280rpx;
  	  display: flex;
  	  justify-content: center;
  	  align-items: center;
  }
  .changeStylebg{
  	background-color: #7F090B;
  }
</style>
